<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>m1</title>
    <link href="css/webgl-tutorials.css" rel="stylesheet">
    <style>
        /* @import url("https://webglfundamentals.org/webgl/resources/webgl-tutorials.css"); */
        /* @import url("css/webgl-tutorials.css"); */
        body {
            margin: 0;
        }

        canvas {
            /* width: 100vw;
            height: 100vh; */
            display: block;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <div id="uiContainer">
        <div id="ui">
            <div id="fov"></div>
            <div id="x"></div>
            <div id="y"></div>
            <div id="z"></div>
            <div id="angleX"></div>
            <div id="angleY"></div>
            <div id="angleZ"></div>
        </div>
    </div>
    <!-- vertex shader -->
    <script id="vertex-shader-2d" type="x-shader/x-vertex">
        attribute vec4 a_position;
        attribute vec4 a_color;

        uniform mat4 u_matrix;

        varying vec4 v_color;

        void main() {
            // 将位置和矩阵相乘
            gl_Position = u_matrix * a_position;

            // 传递颜色到给片段着色器
            v_color = a_color;
        }
</script>
    <!-- fragment shader -->
    <script id="fragment-shader-2d" type="x-shader/x-fragment">
        precision mediump float;
        
        // Passed in from the vertex shader.
        varying vec4 v_color;

        void main() {
            gl_FragColor = v_color;
        }
</script>
    <!--
for most samples webgl-utils only provides shader compiling/linking and
canvas resizing because why clutter the examples with code that's the same in every sample.
See https://webglfundamentals.org/webgl/lessons/webgl-boilerplate.html
and https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
for webgl-utils, m3, m4, and webgl-lessons-ui.
-->
    <script src="lib/webgl-utils.js""></script>
<script src=" lib/webgl-lessons-ui.js"></script>
    <script type="text/javascript" src="dist/js/main.js"></script>

</body>

</html>